<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- element.属性 获取内置属性值 （元素本身自带的属性值） -->
    <!-- element.getAttribute('属性') 主要获得自定义的属性 程序员自定义的属性 -->

    <div id="dome" index='1' class="one"></div>


    <script>
        var div = document.querySelector('div');

        //1.获得属性值
        console.log(div.id);
        console.log(div.getAttribute('index'));   //获得自定义的属性值


        //2.设置元素属性值    setAttribute
        // 方法一   element.属性 =‘值’
        div.id = 'text'
        div.className = 'two'
        //方法二 element.setAttribute('属性','值')   主要针对于自定义
        div.setAttribute('index', '2')
        div.setAttribute('class', 'three')

        //3.移除属性
        div.removeAttribute('index')
    </script>
</body>

</html>